<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>鼎嘉旅游-票务预订</title>
</head>
<body>
<%@ include file="/WEB-INF/elements/header.jsp" %>
<link rel="stylesheet" href="${base}/statics/css/orderform.css"  media="all">
<link rel="stylesheet" href="${base}/statics/css/orderpublic.css"  media="all">
<!-- content begin -->
		<div class="clear"> </div>
		<!---start-content---->
			 <div class="wrap"> 
			<!---start-contact---->
			<div class="input_info">
			
			<input type="hidden" name="id" value="${user.id }">
			<h3><!-- react-text: 23 -->联系人信息<!-- /react-text --><span class="linkman_tips">如果信息正确可以不用修改，请准确填写联系人信息（手机号码Email）</span></h3>
			<div class="product_input layoutfix">
				<ul class="input_box linkman_info">
					<li><label class="product_label">姓名</label><span class="frm_required">*</span><input  type="text" value="${user.realname }" id="realname" placeholder="请输入联系人姓名" class="input_m" data-valid="false" data-message="请填写姓名" data-container="uid-0"></li>
					<li><label class="product_label">手机号码</label><span class="frm_required">*</span>
						<select>
							<option value="86" style="display: none;">中国大陆86</option>
						</select>
						<!-- react-text: 36 -->
						<!-- /react-text --><input  type="text" value="${user.phone }" placeholder="必填，用于接收短信" id="phone" class="input_m" data-valid="false" data-message="请填写手机号码" data-container="uid-1"></li>
					<li><label class="product_label">Email</label><input type="text" value="${user.email }" placeholder="非必填，用于接收订单确认信息" id="email" class="input_m" data-valid="true" data-message="请填写电子邮箱" data-container="uid-2" autocomplete="off"><span class="hrs">如不填写，也可至订单详情中查看相关信息。</span></li>
					<li style="text-align: center;">  <button id="saveuser" class="layui-btn layui-btn-danger" style="width:150px; ">修改并保存个人信息</button></li>
				</ul>
			</div>
			
		</div>
		
		
		
		<div class="input_info">
			<h3><span class="title">旅客信息</span><span class="tips_txt">为了您能顺利出行，请务必确认所填姓名、性别与所持证件一致</span><input type="text" placeholder="查找常用旅客" class="isValid ticket_search fl_r" data-valid="true" data-message="" data-container="uid-3" value=""></h3><noscript data-type="PassengerList Component"></noscript>
			<!-- react-text: 352 -->
			<!-- /react-text -->
			<form  id="form" action="${base }/order/order.do" method="post">
			<c:forEach begin="1" end="${mamNum }" var="a">
			<input type="hidden" name="orders[${a-1 }].user.id" value="${user.id }">
			<input type="hidden" name="orders[${a-1 }].ticket.id" value="${routeId }">
			<input type="text" name="orders[${a-1 }].begintime" value="<fmt:formatDate value="${date }" pattern="yyyy-MM-dd HH:mm:ss"/>">
			<div class="product_input layoutfix">
				<h4><div>旅客${a }</div><div><span class="adult">成人</span></div></h4>
				<ul class="input_box" data-pass="0">
					<li><label class="product_label">中文姓名</label><span class="frm_required">*</span><input lay-verify="required" name="orders[${a-1}].realName" type="text" value="" placeholder="与证件姓名一致" data-role="nameCN" class="input_m" data-valid="false" data-message="请填写中文姓名" data-container="uid-4">
						<a class="explain" href="javascript:;">填写说明</a>
					</li>
					<!-- <li><label class="product_label">英文姓名</label><span class="frm_required">*</span><input type="text" value="" data-role="nameEnLast" placeholder="姓（拼音或英文）" class="input_englishname" data-valid="false" data-message="请输入英文/拼音，如姓名为张小明，则在“姓（拼音或英文）”栏中输入Zhang；在“名（拼音或英文）”栏中输入XiaoMing" data-container="uid-6" data-tooltipsoptions="[object Object]" style="text-transform: uppercase;"><input type="text" value="" data-role="nameEnFirst" placeholder="名（拼音或英文）" class="input_englishname input_engnomar" data-valid="false" data-message="请输入英文/拼音，如姓名为张小明，则在“姓（拼音或英文）”栏中输入Zhang；在“名（拼音或英文）”栏中输入XiaoMing" data-container="uid-6" style="text-transform: uppercase;"></li>
					 --><li><label class="product_label">证件类型</label><span class="frm_required">*</span>
						<select>
							<option value="1">身份证</option>
							<option value="2">护照</option>
							<option value="7">回乡证</option>
							<option value="8">台胞证</option>
							<option value="10">港澳通行证</option>
						</select><input lay-verify="identity" name="orders[${a-1}].cardno" type="text" value="" placeholder="证件号码" class="input_s" data-valid="false" data-message="请填写身份证号码" data-container="uid-7"></li>
					<li><label class="product_label">手机号码</label><span class="frm_required">*</span>
						<select>
							<option value="86" style="display: none;">中国大陆86</option>
						</select>
						<!-- react-text: 405 -->
						<!-- /react-text --><input  lay-verify="required|phone" name="orders[${a-1}].phone" type="tel" value="" placeholder="境内11位号码" class="input_m" data-valid="false" data-message="请至少输入一位出行旅客的手机号码" data-container="uid-12"><span class="hrs">请至少输入一位出行旅客的手机号码</span></li>
				</ul>
				<div class="save_wrap">
					<a href="javascript:void(0);" class="save selected"><i></i>
						<!-- react-text: 411 -->保存
						<!-- /react-text -->
					</a>
					<a href="javascript:void(0);" class="clear">清空</a>
				</div>
			</div>
			</c:forEach>
			<c:forEach begin="${mamNum+1 }" end="${childNum+mamNum  }"  var="a">
			<input type="hidden" name="orders[${a-1 }].user.id" value="${user.id }">
			<input type="hidden" name="orders[${a-1 }].ticket.id" value="${routeId }">
			<input type="text" name="orders[${a-1 }].begintime" value="<fmt:formatDate value="${date }" pattern="yyyy-MM-dd HH:mm:ss"/>">
			<div class="product_input layoutfix">
				<h4><div>旅客${a}</div><div><span class="child">儿童</span><i class="ico_notice" data-role="jmp" data-params="{&quot;options&quot;:{&quot;type&quot;:&quot;jmp_title&quot;,&quot;classNames&quot;:{&quot;boxType&quot;:&quot;jmp_title&quot;},&quot;template&quot;:&quot;#jmp_pkg_title&quot;,&quot;content&quot;:{&quot;txt0&quot;:&quot;儿童价标准：年龄2-12周岁（不含）,不占床,服务标准同成人&quot;},&quot;css&quot;:{&quot;maxWidth&quot;:&quot;300&quot;,&quot;minWidth&quot;:&quot;240&quot;},&quot;alignTo&quot;:&quot;cursor&quot;,&quot;showArrow&quot;:false}}"></i></div></h4>
				<ul class="input_box" data-pass="2">
					<li><label class="product_label">中文姓名</label><span class="frm_required">*</span><input lay-verify="required" name="orders[${a-1}].realName" type="text" value="" placeholder="与证件姓名一致" data-role="nameCN" class="input_m input_error" data-valid="false" data-message="请填写中文姓名" data-container="uid-22">
						<a class="explain" href="javascript:;">填写说明</a>
					</li>
					<!-- <li><label class="product_label">英文姓名</label><span class="frm_required">*</span><input type="text" value="" data-role="nameEnLast" placeholder="姓（拼音或英文）" class="input_englishname input_error" data-valid="false" data-message="请输入英文/拼音，如姓名为张小明，则在“姓（拼音或英文）”栏中输入Zhang；在“名（拼音或英文）”栏中输入XiaoMing" data-container="uid-24" data-tooltipsoptions="[object Object]" style="text-transform: uppercase;"><input type="text" value="" data-role="nameEnFirst" placeholder="名（拼音或英文）" class="input_englishname input_engnomar input_error" data-valid="false" data-message="请输入英文/拼音，如姓名为张小明，则在“姓（拼音或英文）”栏中输入Zhang；在“名（拼音或英文）”栏中输入XiaoMing" data-container="uid-24" style="text-transform: uppercase;"></li>
					 --><li><label class="product_label">证件类型</label><span class="frm_required">*</span>
						<select>
							<option value="1">身份证</option>
							<option value="2">护照</option>
							<option value="7">回乡证</option>
							<option value="8">台胞证</option>
							<option value="10">港澳通行证</option>
						</select><input lay-verify="identity" name="orders[${a-1}].cardno" type="text" value="" placeholder="证件号码" class="input_s input_error" data-valid="false" data-message="请填写身份证号码" data-container="uid-25"></li>
					<li><label class="product_label">手机号码</label><span class="frm_required">*</span>
						<select>
							<option value="86" style="display: none;">中国大陆86</option>
						</select>
						<!-- react-text: 526 -->
						<!-- /react-text --><input lay-verify="required|phone" name="orders[${a-1}].phone" type="tel" value="" placeholder="境内11位号码" class="input_m input_error" data-valid="false" data-message="请至少输入一位出行旅客的手机号码" data-container="uid-30"><span class="hrs">请至少输入一位出行旅客的手机号码</span></li>
				</ul>
				<div class="save_wrap">
					<a href="javascript:void(0);" class="save selected"><i></i>
						<!-- react-text: 532 -->保存
						<!-- /react-text -->
					</a>
					<a href="javascript:void(0);" class="clear">清空</a>
				</div>
			</div>
		</c:forEach>
			
			<!-- react-empty: 656 -->
			<div class="reserve_limited">
				<h4>因服务能力有限，请您核实以下情况，以免造成出行不便。</h4>
				<p>
					<!-- react-text: 660 -->★
					<!-- /react-text -->
					<!-- react-text: 661 -->本产品仅适用于自备持有ｇ签注或ｌ签注的中国大陆游客
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 663 -->★
					<!-- /react-text -->
					<!-- react-text: 664 -->因酒店原因，本产品起价适用于中国大陆地区游客，持其他国家或地区证件的游客请选择对应的选项补足差额。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 666 -->★
					<!-- /react-text -->
					<!-- react-text: 667 -->18岁以下未成年人需要至少一名家长或成年旅客全程陪同。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 669 -->★
					<!-- /react-text -->
					<!-- react-text: 670 -->12周岁以下儿童不占床，如需占床按成人提交订单。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 672 -->★
					<!-- /react-text -->
					<!-- react-text: 673 -->出于安全考虑，本产品不接受孕妇预订，敬请谅解。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 675 -->★
					<!-- /react-text -->
					<!-- react-text: 676 -->此产品不接受3人间加床及拼房，敬请谅解。如订单人数为奇数，请在后续附加产品页面中选择房间数或单人房差选项。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 678 -->★
					<!-- /react-text -->
					<!-- react-text: 679 -->本产品不接受儿童按成人提交订单，敬请谅解。
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 681 -->★
					<!-- /react-text -->
					<!-- react-text: 682 -->您选择的保险仅支持90岁以下旅客预订投保
					<!-- /react-text -->
				</p>
				<p>
					<!-- react-text: 684 -->★
					<!-- /react-text -->
					<!-- react-text: 685 -->航班价格变动频繁,请在提交订单后20分钟内完成支付
					<!-- /react-text -->
				</p>
			</div>
		</div>
	<!--下单提示信息-->
	<div class="tips-list">
		<p><span class="ico_warning"></span>
			<!-- react-text: 54 -->订单一经提交，我们将立即操作扣款。如套餐内机票或酒店无位，我们将联系您更改订单或解除信用卡预授权。
			<!-- /react-text -->
		</p>
		<p><span class="ico_warning"></span>
			<!-- react-text: 181 -->若现在完成预订，订单预计会在
			<!-- /react-text -->
			<!-- react-text: 182 -->2018年12月14日 15:32
			<!-- /react-text -->
			<!-- react-text: 183 -->确认结果
			<!-- /react-text -->
		</p>
	</div>
		<!--订单提交表单-->
		<div class="defray_box layoutfix">
			<div class="defray_shop_box">
				<a href="/tour/detail/p21415481s559.html?ShoppingId=1f1e0865bca54b9baa43b9b06221b077" class="prev_stop"><b></b>
					<!-- react-text: 59 -->上一步
					<!-- /react-text -->
				</a>
				<a href="javascript:;" class="temporary_order"><b></b>
					<!-- react-text: 62 -->暂存订单
					<!-- /react-text -->
				</a>
			</div>
			<!-- <a href="###" class="btn_proess_big"></a> -->
			<button class="btn_proess_big" lay-submit="" lay-filter="demo1">同意以下条款，去支付</button>
			<!-- <input  class="" lay-submit="" type="submit" value=""> -->
		</div>
		</form>
			  </div>
			<!---End-contact---->
<!-- content end -->

<script src="${base }/statics/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['#form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  /* 
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  }); */
//自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
//监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return true;
  });

  
  
});
  </script>
  <script type="text/javascript" src="${base}/statics/js/toorder.js"></script>
  <%@ include file="/WEB-INF/elements/footer.jsp" %>
</body>
</html>